export function toggle(e){
    const transition = document.startViewTransition(() => {
        document.documentElement.classList.toggle('dark')
    })

    transition.ready.then(() => {
        const {clientX, clientY} = e

        const radius = Math.hypot(
            Math.max(clientX, innerWidth - clientX),
            Math.max(clientY, innerHeight - clientY)
        )

        const clipPath = [
            `circle(0% at ${clientX}px ${clientY}px)`,
            `circle(${radius}px at ${clientX}px ${clientY}px)`
        ]

        const isDark = document.documentElement.classList.contains('dark')
        // 自定义动画
        document.documentElement.animate(
            {
              // 如果要切换到暗色主题，我们在过渡的时候从半径 100% 的圆开始，到 0% 的圆结束
              clipPath: isDark ? clipPath.reverse() : clipPath
            },
            {
              duration: 500,
              // 如果要切换到暗色主题，我们应该裁剪 view-transition-old(root) 的内容
              pseudoElement: isDark
                ? '::view-transition-old(root)'
                : '::view-transition-new(root)'
            }
        )
    })
}